<template>
  <Card title="产量记录" style="height: 300px;overflow-y: scroll">
    <div class="flex justify-between" style="align-items: baseline" v-for="item in data" :key="item.xh">
      <div class="flex justify-between" style="padding: 5px 0;">
        <a-tag :color="item.color">{{item.xh}}</a-tag>
        <div>{{ item.title }}</div>
      </div>
      <div>{{ item.number }}</div>
    </div>
  </Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {Card} from "ant-design-vue";
interface DataItem {
  xh: string;
  title: string;
  color:string;
  number: string;
}
const data: DataItem[] = [
  {
    xh:'1',
    title: 'Ant Design Title 1',
    color:'black',
    number:'321321213'
  },
  {
    xh:'2',
    title: 'Ant Design Title 2',
    color:'black',
    number:'32132121'
  },
  {
    xh:'3',
    title: 'Ant Design Title 3',
    color:'black',
    number:'3213212'
  },
  {
    xh:'4',
    title: 'Ant Design Title 4',
    color:'',
    number:'321321'
  },
  {
    xh:'5',
    title: 'Ant Design Title 4',
    color:'',
    number:'32132'
  },
];
export default defineComponent({
  components: {Card},
  setup() {
    return {
      data,
    };
  },
});
</script>
<style>
.ant-tag{
  border-radius:50%;
}
</style>

